<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="45%" style="height: 900px;">
      <div class="content">
        <el-dropdown>
          <el-button size="small">
            树操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="checkALL">全部勾选</el-dropdown-item>
            <el-dropdown-item @click.native="cancelCheckALL">取消全选</el-dropdown-item>
            <el-dropdown-item @click.native="expandAll">展开所有</el-dropdown-item>
            <el-dropdown-item @click.native="closeAll">合并所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tree ref="tree" :data="allTree" :props="defaultProps" style="margin-top: 10px;" @node-click="handleNodeClick"
          :default-expand-all="true" :expand-on-click-node="false" :default-checked-keys="[]" show-checkbox
          node-key="id"></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryResourcesByRoleId,
  saveRoleResources,
  sysResourceAllTreeForSelect
} from '@/api/index'
export default {
  name: "RoleFunctionDialog",
  data() {
    return {
      title: "分配功能",
      visible: false,
      role: {},
      defaultProps: {
        children: 'children',
        label: 'resourceName'
      },
      allTree: [],
      iExpandedKeys: [],
      checkedKeys: [],
      allTreeKeys: []
    }
  },
  created() { },
  mounted() { },
  methods: {
    set(val) {
      this.role = Object.assign({}, val);
      this.initTree();
      this.visible = true;
    },
    initTree() {
      sysResourceAllTreeForSelect({}).then(res => {
        if (res.data.code == 0) {
          this.allTree = res.data.data;
          if (this.allTree) {
            this.allTreeKeys = [];
            for (let i = 0; i < this.allTree.length; i++) {
              let temp = this.allTree[i];
              this.getAllKeys(temp);
            }
          }
          this.initRole();
        }
      });
    },
    initRole() {
      let _this = this
      queryResourcesByRoleId({ roleId: this.role.id }).then(res => {
        if (res.data.code == 0) {
          let keys = res.data.data.resourceVOList;
          if (keys) {
            const checkTreeNode = [] // 存放选中的节点
            for (const item of keys) {
              const node = _this.$refs.tree.getNode(item.id)
              if (node && node.isLeaf) {
                checkTreeNode.push(item.id)
              }
            }
            _this.$refs.tree.setCheckedKeys(checkTreeNode)
          }
        }
      });
    },
    getAllKeys(node) {
      this.allTreeKeys.push(node.id)
      // if (node.children && node.children.length > 0) {
      //   for (let a = 0; a < node.children.length; a++) {
      //     this.getAllKeys(node.children[a])
      //   }
      // }
    },
    expandAll() {
      var treeNodeList = this.$refs.tree.store._getAllNodes();
      for (var i = 0; i < treeNodeList.length; i++) {
        treeNodeList[i].expanded = true;
      }
    },
    closeAll() {
      var treeNodeList = this.$refs.tree.store._getAllNodes();
      for (var i = 0; i < treeNodeList.length; i++) {
        treeNodeList[i].expanded = false;
      }
    },
    checkALL() {
      this.$refs.tree.setCheckedKeys(this.allTreeKeys);
    },
    cancelCheckALL() {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleNodeClick(data) {
      console.log(data)
    },
    confirmData() {
      let checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
      // let reIds = this.$refs.tree.getHalfCheckedKeys()
      var menuIds = []
      checkedNodes.forEach(nodes => {
        menuIds.push(nodes.id)
      })
      //
      console.log(menuIds)
      let params = {
        roleId: this.role.id,
        resourceIds: menuIds
      }
      saveRoleResources(params).then((res) => {
        const data = res.data
        if (data.code == 0) {
          this.$message.success('设置成功');
          this.closeNetWorker();
        } else {
          this.$message.error(data.data || '设置失败')
        }
      })
    },
    closeNetWorker() {
      this.$refs.tree.setCheckedKeys([]);
      this.visible = false;
    }
  }
};
</script>
<style scoped lang="less">
.content {
  height: 400px;
  overflow: auto;

  // /deep/ .el-tree-node__label {
  //   font-size: 16px;
  // }
}
</style>
